<template>
	<div
		class="list-item"
		:class="horizontal ? 'list-item-horizontal' : ''"
		:style="{
			marginBottom: marginBottom + 'px',
			marginRight: marginRight + 'px',
		}"
	>
		<div class="list-delete" v-if="remove" @click="removeClick">
			<i class="ri-subtract-fill"></i>
		</div>
		<div class="list-item-img" :style="{ width: width, height: height }">
			<img :src="img" v-if="img" />
			<span v-if="watch">
				<b>{{ watch / 1000 }}</b>
				人观看
			</span>
		</div>
		<div class="list-item-meta">
			<div class="list-item-title">{{ title }}</div>
			<div class="list-item-rate" v-if="rate">
				<van-rate v-model="rate" :size="rateSize" />
				<span :style="{ fontSize: rateSize + 'px' }">{{
					rate * 2
				}}</span>
			</div>
			<span class="list-item-label">{{ label }}</span>
			<div
				class="list-item-description van-multi-ellipsis--l2"
				v-if="desc"
			>
				{{ desc }}
			</div>
			<div class="list-item-extra" v-if="extra">
				{{ extra }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		img: String,
		title: String,
		watch: Number,
		rate: Number,
		label: String,
		desc: String,
		extra: String,
		marginBottom: String,
		marginRight: String,
		horizontal: {
			type: Boolean,
			default: false,
		},
		width: String,
		height: String,
		rateSize: {
			type: String,
			default: "14",
		},
		remove: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {};
	},
};
</script>

<style lang="less" scoped>
.list-item-img {
	position: relative;
	height: 160px;
	overflow: hidden;
	span {
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		line-height: 32px;
		padding: 0 12px;
		text-align: center;
		background: fade(black, 65%);
		color: white;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;

		b {
			color: var(--yellow);
			font-weight: normal;
		}
	}
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.list-item-meta {
	padding: 8px 0;
}
.list-item-title {
	font-size: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.list-item-rate {
	color: var(--yellow);
	&:deep(.van-rate__item) {
		padding-right: 2px;
	}
	span {
		vertical-align: -1px;
		font-family: "Flama";
		margin-left: 6px;
	}
}
.list-item-description {
	font-size: 14px;
	color: fade(white, 45%);
	margin-bottom: 4px;
}
.list-item {
	position: relative;
	&.list-item-horizontal {
		display: flex;
		.list-item-title {
			font-size: 17px;
		}
		.list-item-img {
			flex: 0 0 112px;
			width: 112px;
			margin-right: 24px;
		}
		.list-item-meta {
			padding: 0;
		}
		.list-item-label {
			display: block;
			font-size: 14px;
			color: fade(white, 65%);
			margin-bottom: 4px;
			margin-top: 4px;
		}
		.list-item-description {
			margin-bottom: 8px;
		}
	}
	.list-delete {
		position: absolute;
		z-index: 1;
		right: -8px;
		top: -8px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		text-align: center;
		line-height: 18px;
		background: #ff3399;
		color: white;
		border: 1px solid white;
	}
}
</style>
